<template>
  <div class="plan-date ">
    <div class="left">
        <span class="title">
          起始日期
        </span>
      <span class="date">
            {{startDay}}
          </span>
      <span class="week">
        {{getWeek(startDate)}}
      </span>
    </div>

    <div class="center">

    </div>

    <div class="right">
        <span class="title">
          结束日期
        </span>
      <span class="date">
            {{endDay}}
          </span>
      <span class="week">
        {{getWeek(endDate)}}
      </span>
    </div>

  </div>
</template>

<script>
import { parseTime, getWeek } from '../../util/time'

export default {
  computed: {
    startDay () {
      return parseTime(this.startDate, '{m}月{d}日')
    },
    endDay () {
      return parseTime(this.endDate, '{m}月{d}日')
    }
  },
  methods: {
    getWeek (date) {
      return getWeek(date)
    }
  },
  props: {
    startDate: String,
    endDate: String
  }
}
</script>

<style scoped lang="stylus">
  .plan-date
    padding 0 24px
    background-color #F5F4F7
    display flex
    justify-content space-between
    align-items center

    .center
      height: 1px;
      background: rgba(185, 183, 192, 1);
      flex 1px
      margin 0 38px

    .left, .right
      display flex
      flex-direction column
      justify-content space-between
      align-items flex-start

      .title
        dpr-font(12px)
        color: rgba(185, 183, 192, 1);

      .date
        dpr-font(14px)
        color: rgba(26, 26, 48, 1);
        margin 9px 0

      .week
        dpr-font(14px)
        color: rgba(85, 84, 93, 1);

</style>
